<template>
  <div class="loheader">
    <!--用户登录-->
    <div id="htop">
      <el-container>
        <div class="el-header">
          <el-header >
            <div class="logo">
              <a title="豆果美食" href="/index">
                <img src="http://www.autotianjin.com.cn/i/web/images/logo.png" alt="">
              </a>
            </div>
          </el-header>
        </div>
        <!--内容-->
        <div id="main">
          <el-main>
            <el-row>
              <el-col :span="17">
                <div style="margin-top: 20px" class="grid-content bg-purple">
                  <img width="100%" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/banner2.jpg">
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <template>
                    <div >
                      <el-card class="box-card" style="margin-top: 40px;margin-left: 70px">
                        <el-tabs   v-model="activeName" @tab-click="handleClick" value="free"
                                   style="background-color: white;width: 350px;">
                          <el-tab-pane label="注册用户" name="free">
                            <el-form :label-position="labelPosition" :model="regForm" ref="regForm" :rules="rules">
                              <el-form-item prop="username">
                                <el-input v-model="regForm.username" placeholder="请输入用户名"></el-input>
                              </el-form-item>
                            <el-form-item prop="password">
                              <el-input v-model="regForm.password"  show-password placeholder="请输入登录密码"></el-input>
                            </el-form-item>
                            <el-form-item prop="nickname">
                              <el-input v-model="regForm.nickname" placeholder="请输入昵称"></el-input>
                            </el-form-item>
                              <div>
                                <el-button type="info" @click="resetForm('regForm')">重置</el-button>
                                <el-button type="warning" @click="submitRegForm('regForm')">注册</el-button>
                              </div>
                              <div  style="margin-top:20px">
                                <template>
                                  <el-checkbox v-model="checked">我已阅读并且同意<a>梅江车展使用协议</a></el-checkbox>
                                </template>
                              </div>
                              <div class="font-a">
                                <el-row>
                                  <el-col :span="8" >
                                    <div>社交账号登录</div>
                                  </el-col>
                                  <el-col :span="16">
                                    <div>
                                      <el-row>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/wx.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微信
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/qq.png" style="width: 25px;height: 25px;
                            border-radius: 15px;vertical-align: middle;position: relative;right: 5px;bottom: 3px">QQ
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/weibo.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微博
                                          </div>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-form>
                          </el-tab-pane>

                          <el-tab-pane  label="密码登录" name="pass">
                            <el-form  ref="user" :model="user">
                              <el-form-item>
                                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
                              </el-form-item>
                              <el-form-item>
                                <el-input v-model="user.password" show-password placeholder="请输入密码">
                                </el-input>
                              </el-form-item>
                              <div class="font-b" style="margin-top: 84px" >
                                <el-button type="warning" @click="submitLoginForm('user')">登录</el-button>
                              </div>
                              <div style="margin-top:20px">
                                <template>
                                  <el-checkbox v-model="checked">我已阅读并且同意<a>梅江车展使用协议</a></el-checkbox>

                                </template>
                              </div>
                              <div>
                                <el-row>
                                  <el-col :span="8" >
                                    <div class="font-a">社交账号登录</div>
                                  </el-col>
                                  <el-col :span="16">
                                    <div class="font-a">
                                      <el-row>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/wx.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微信
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/qq.png" style="width: 25px;height: 25px;
                            border-radius: 15px;vertical-align: middle;position: relative;right: 5px;bottom: 3px">QQ
                                          </div>
                                        </el-col>
                                        <el-col :span="8">
                                          <div>
                                            <img src="https://passport.douguo.com/public/img/web/weibo.png" style="width: 20px;height: 20px;
                            border-radius: 20px;vertical-align: middle;position: relative;right: 5px">微博
                                          </div>
                                        </el-col>
                                      </el-row>
                                    </div>
                                  </el-col>
                                </el-row>
                              </div>
                            </el-form>
                          </el-tab-pane>
                        </el-tabs>
                      </el-card>
                    </div>
                  </template>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </div>
        <el-footer height="200px">
          <el-row style="width: 1200px !important;margin: 0px auto;color:#fff;">
            <el-col :span="13" style="margin-top: 20px">
              <el-row>
                <el-col :span="10">
                  <p class="title">主办单位
                    <el-divider></el-divider>
                  </p>
                  <p>中国汽车流通协会</p>
                  <p>百瑞国际会展集团有限公司</p>
                  <p>中国国际贸易促进委员会天津市分会</p>
                </el-col>
                <el-col :span="7">
                  <p class="title">承办单位<el-divider></el-divider></p>
                  <p>天津国际展览有限公司</p>
                  <p>北京杜米文化传播有限公司</p>
                </el-col>
                <el-col :span="7">
                  <p class="title" style="width: 100px">特别支持单位<el-divider></el-divider></p>
                  <p>天津汽车流通协会</p>
                </el-col>
              </el-row>
              <el-row style="font-size: 14px;margin-top: 6px">
                Copyright © 2023 天津浩特瑞展览有限公司津ICP备16007344号-2技术支持：沣泽霖（北京）信息科技有限公司
              </el-row>
            </el-col>
            <el-col :span="4" style="text-align: center;margin-top: 20px">
              <img width="90" src="http://www.autotianjin.com.cn/i/web/images/images_tianjin_20230428/code_weixin.jpg" alt="">
              <p>扫一扫关注公众号</p>
            </el-col>
            <el-col :span="5" style="text-align: center;margin-top: 20px">
              <img src="http://www.autotianjin.com.cn/i/web/images/footer_logo.png" width="100%" alt="">
              <p style="font-size: 16px;margin-top: 10px">服务热线</p>
              <p style="font-size: 22px;margin-top: 15px">400-8099-016</p>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>

    </div>

  </div>
</template>

<script>
import global from '../../Global'
let preAdminUrl = global.preAdmins;
export default {
  data() {
    return {
      $: "",
      activeName: 'free',
      labelPosition: 'right',
      user: {username: "", password: "",nickname:""},
      radio: '1',
      checked: true,
      regForm :{},
      // 表单
      ruleForm: {
        username: 'root',
        password: '123456'
      },
      // 表单规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 提交login表单
    submitLoginForm(formName) {
      console.log("提交login表单");
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
          let url = preAdminUrl + '/login';
          let formData = this.qs.stringify(this.user);

      this.axios
          .post(url, formData).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 20000) {
              this.$message({
                showClose: true,
                message: '登录成功！',
                type: 'success'
              });
              //把jwt中用户名存到浏览器
              let jwt = jsonResult.data;
              console.log("jsonResult", jsonResult)
              localStorage.setItem("localJwt", jwt);
              this.$router.push("/index");
            } else {
              this.$message({
                showClose: true,
                message: jsonResult.message,
                type: 'error'
              });
            }
          });
        // } else {
        //   console.log('error submit!!');
        //   return false;
        // }

    },
    //注册表单提交
    submitRegForm(formName) {
      console.log("提交注册表单");
      //
      this.$refs[formName].validate((valid) => {
         if (valid) {
          let url = preAdminUrl + '/register';
          let formData = this.qs.stringify(this.regForm);

      this.axios
          .post(url, formData).then((response) => {
            let responseBody = response.data;
            console.log(responseBody);
            if (responseBody.state == 20000) {
              this.$message({
                showClose: true,
                message: '注册成功！',
                type: 'success'
              });
              this.resetForm(formName);
            } else {
              this.$message({
                showClose: true,
                message: responseBody.message,
                type: 'error'
              });
            }
          });
        } else {
           console.log('error submit!!');
           return false;
        }
      })
    },
    handleClick(tab, event) {

      console.log(tab, event);
    },
    handleSelect(key, keyPath) {
      console.log(2)
      console.log(key, keyPath);
    },
    resetForm(formName) {
      console.log("11111111111111")
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
  }
}

</script>

<style>
.font{

}

.box-card {
  background-color: #fff;
  width: 400px;
  min-height: 480px;
  float: contour;
  border-radius: 2px;
}

body {
  font-size: 12px;
  color: #333;
  background-repeat: no-repeat;
  text-align: center;
  width: 1200px;
  margin: 0 auto;
  background-color: #f8f8f7;
}

body{
  width: 100%;
  text-align: center;
}

/*html {*/
/*  background-color: #f8f8f7;*/
/*  -webkit-text-size-adjust: 100%;*/
/*  -ms-text-size-adjust: 100%*/
/*}*/


.loheader {
  background-color: #fff;
  border-bottom: 1px solid #f3f3f3;
}
/*logo返回*/



.el-header{
  height: 90px;
}
main{
  background-color: #f8f8f7;

}
.font-a{
  margin-top: 150px;
}

.logo {
  float: left;
  line-height: 10em;
  overflow: hidden;
  margin-top: 20px;
  margin-left: 0px;
}
/*.grid-content bg-purple{*/
/*  margin-top: 500px;*/
/*}*/
.el-footer{
  margin: 0;
  padding: 0;
  background-color: #242424;
  overflow: hidden;
  text-align: left;
  position: relative;
  bottom: -55px;
}
.el-footer .title{
  width: 80px;
}
.el-footer .title .el-divider{
  background-color: #ffd04b;
  height: 2px;
  margin: 8px 0;
}
.el-footer p{
  margin-top: 6px;
}
</style>